<template>
  <div class="swiperBox">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"  v-for="item in swiperData" :key="item.id">
          <broker-item v-if="from === 'index'" :data="item"/>
          <art-user v-else :data="item"/>
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev swiper-button-white"></div>
      <div class="swiper-button-next swiper-button-white"></div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import BrokerItem from '../component/BrokerItem'
import ArtUser from './ArtUser'
export default {
  props: ['swiperData', 'from'],
  components: {
    BrokerItem,
    ArtUser
  },
  data () {
    return {
      mySwiper: null
    }
  },
  mounted () {
    this.hundleMySwiper()
  },
  methods: {
    hundleMySwiper: function () {
      this.$nextTick(() => {
        this.mySwiper = new Swiper('.swiper-container', {
          loop: true,
          pagination: '.swiper-pagination',
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          // 如果需要前进后退按钮
          nextButton: '.swiper-button-next',
          prevButton: '.swiper-button-prev',
          bulletActiveClass: 'my-bullet-active',
          slidesPerView: 4,
          // 图片间的间隔
          spaceBetween: 20,
          clickable: true,
          autoplay: false
          // autoplay: 5000
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.swiperBox {
  /deep/.swiper-container {
    padding-bottom: 35px;
  }
  /deep/.swiper-pagination {
    bottom: 5px;
  }
  /deep/.swiper-pagination-bullet {
    background: #696969;
    opacity: 1;
    width: 12px;
    height: 12px;
  }
  /deep/.my-bullet-active {
    background: #ffffff;
    opacity: 1;
  }
}
</style>
<style>
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
  background-image: url('../../assets/icon/arroe_left.svg');
  width: 35px;
  height: 35px;
  background-size: 35px 35px;
  left: 5px;
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
  background-image: url('../../assets/icon/arrow_right.svg');
  width: 35px;
  height: 35px;
  background-size: 35px 35px;
  right: 5px;
}
</style>
